<template>
    <div>
        <div class="outmain ba_f formwidth">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>饿了么设置</span>
                </div>
            </div>
            <div class="ba_f8 pad_20">
                <div class="lh25 msgtext fon_12">
                    温馨提示：目前仅支持一键获取商户的饿了么外卖订单，进行统一管理；<br>
                    1、需要先申请饿了么商家开放平台开发者账号，申请地址；<a href="https://open.shop.ele.me/openapi" target="_blank" class="color_9">https://open.shop.ele.me/openapi</a>；<br>
                    2、管理中心-创建应用-企业应用-企业应用-勾选全部应用权限-其他内容按实际填写，保存即可；<br>
                    3、需要商户已签约饿了么外卖平台。
                </div>
            </div>
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="开放平台对接" name="1">
                    <el-form ref="form" :model="form" label-width="180px" class="mar_t20">
                        <el-form-item label="开关">
                            <el-radio-group v-model="form.open">
                                <el-radio label="1">开启</el-radio>
                                <el-radio label="2">关闭</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="AppID"  prop="appId" :required="true" v-show="form.open=='1'">
                            <el-input v-model="form.appId" placeholder="请输入饿了么商家开放平台AppID"></el-input>
                            <div class="yb_margin lh16">请输入饿了么商家开放平台AppID</div>
                        </el-form-item>
                        <el-form-item label="AppSecret" prop="appSecret" :required="true" v-show="form.open=='1'">
                            <el-input v-model="form.appSecret" placeholder="请输入饿了么商家开放平台AppSecret" :type="passw">
                                <i slot="suffix" :class="icon" @click="showPass"></i>
                            </el-input>
                            <div class="yb_margin lh16">请输入饿了么商家开放平台AppSecret</div>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="饿了么门店对接" name="2">
                    <el-form ref="form2Data" :model="form2Data" label-width="180px" class="mar_t20">
                        <el-form-item label="饿了么门店号ID" :required="true">
                            <el-input v-model="form2Data.eleStoreId" placeholder="请输入饿了么商家门店号ID"></el-input>
                            <div class="yb_margin lh16">请输入饿了么商家门店号ID</div>
                        </el-form-item>
                        <el-form-item label="授权URL" :required="true">
                            <el-button type="text" class="subjectcolor2" @click="djsq" v-show="form2Data.eleStoreId>0">点击授权</el-button>
                        </el-form-item>
                        <div class="shuju_title mar_b20">
                            <div class="shuju_title_text">
                                <span>授权信息</span>
                            </div>
                        </div>
                        <el-form-item label="授权状态" :required="true">
                            <el-tag size="medium" type="success" v-if="sqdata.storeName">已授权</el-tag>
                            <el-tag size="medium" type="info" v-else>未授权</el-tag>
                        </el-form-item>
                        <el-form-item label="授权商家名称" :required="true">
                            {{sqdata.storeName}}
                        </el-form-item>
                        <el-form-item label="授权商家地址" :required="true">
                            {{sqdata.storeAddress}}
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="onSubmit">保存</el-button>
        </div>
    </div>
</template>
<script>
    import {getConfig, postConfig, saveEleStoreId,eleOauth,getSaveEleStoreId,getEleStore} from "@/api/setup";

    export default {
        created() {
            if (this.$route.query.code) {
                this.code = this.$route.query.code
                this.activeName = '2'
                this.init();
            }else {
                this.init();
            }
        },
        data() {
            return {
                activeName: '1',
                form: {
                    appId: '',
                    appSecret: '',
                    open: '2',
                },
                form2Data: {
                    eleStoreId: '',
                },
                form3:{
                    version:'',
                    describe:'',
                },
                sqdata: {},
                code:'',
                passw:"password",
                icon:"el-input__icon el-icon-view",
            }
        },
        methods: {
            async init() {
                if (this.activeName == '1') {
                    this.bus.$emit('loading', true);
                    this.formData()
                } else if (this.activeName == '2') {
                    this.bus.$emit('loading', true);
                    await this.eleOauth()
                    await this.getSaveEleStoreId()
                    await this.getEleStore()
                }
            },
            showPass(){
                if( this.passw=="text"){
                    this.passw="password";
                    this.icon="el-input__icon el-icon-view";
                }else {
                    this.passw="text";
                    this.icon="el-input__icon el-icon-unlock";
                };
            },
            async handleClick() {
                this.bus.$emit('loading', true);
                if (this.activeName == '1') {
                    this.formData()
                } else if (this.activeName == '2') {
                    await this.eleOauth()
                    await this.getSaveEleStoreId()
                    await this.getEleStore()
                }
            },
            async formData() {
                const {data} = await getConfig({ident: 'eleSet'});
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                this.bus.$emit('loading', false)
            },
            async eleOauth() {
                const {data} = await eleOauth();
                // this.konobj = this.form
                // this.form2Data = Object.assign({}, data);
                this.bus.$emit('loading', false)
            },
            async getSaveEleStoreId() {
                const {data} = await getSaveEleStoreId();
                // this.konobj = this.form
                this.form2Data = Object.assign({}, data);
                this.bus.$emit('loading', false)
            },
            async getEleStore() {
                const {data} = await getEleStore({code:this.code?this.code:'',eleStoreId:this.form2Data.eleStoreId?this.form2Data.eleStoreId:''});
                this.sqdata = data
            },
            async djsq() {
                const {msg} = await saveEleStoreId(this.form2Data);
                this.$baseMessage(msg, "success");
                const {data} = await eleOauth();
                if(data){
                    window.open(data,'_self')
                }
            },
            async onSubmit() {
                if (this.activeName == '1') {
                    this.$refs["form"].validate(async (valid) => {
                        if (valid) {
                            this.form.ident = 'eleSet'
                            this.form.identName = '饿了么设置'
                            const {msg} = await postConfig(this.form);
                            this.$baseMessage(msg, "success");
                            this.init();
                        } else {
                            return false;
                        }
                    });
                } else if (this.activeName == '2') {
                    this.$refs["form2Data"].validate(async (valid) => {
                        if (valid) {
                            const {msg} = await saveEleStoreId(this.form2Data);
                            this.$baseMessage(msg, "success");
                            this.init();
                        } else {
                            return false;
                        }
                    });
                }
            },
        }
    }
</script>
